<!-- 进度条组件 -->
<template>
  <view class="progress-bar">
    <scroll-view class="scroll-box" scroll-x>
      <view class="text-center progress-box">
        <view
          class="box box-column-center progress-item"
          :class="{'active': currentIndex >= index}"
          v-for="(item, index) in progressData"
          :key="index"
        >
          <view class="progress-index text-center">
            <view class="icon p-5 circle icon-box box box-column-center box-center border">
              <text class="icon icon-success cl-basic"></text>
            </view>

            <view class="name mt-10 cl-second bold">{{item.name || item}}</view>
            <view class="time cl-second fz-12" v-if="showTime">{{item.time || "&nbsp;"}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },

  props: {
    /**
     * 进度数据
     */
    progressData: {
      type: Array,
      default: () => []
    },

    /**
     * 是否显示时间
     * 显示时间 progressData 需为对象数组 { name: '', time: '' }
     */
    showTime: {
      type: Boolean,
      default: false
    },

    // 当前进度
    currentIndex: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style lang="scss" scoped>
.progress-bar {
  .progress-box {
    padding: 0 20upx;
    white-space: nowrap;

    .progress-item {
      padding: 0 15upx;
      text-align: center;
      display: inline-block;

      &:last-child {
        margin-right: 20upx;
      }

      .icon {
        background-color: $color-border;
      }

      // 活跃的
      &.active {
        .icon {
          background-color: $color-warning;
          border-color: $color-warning;
          color: $color-white;
        }

        .name {
          color: $color-black;
        }

        .time {
          color: $color-basic;
        }
      }

      .progress-index {
        position: relative;
        z-index: 1;

        .icon-box {
          width: 60upx;
          height: 60upx;
          margin: 0 auto;
        }
      }

      &:not(:last-child) {
        .progress-index::before {
          width: 50%;
          height: 6upx;
          content: "";
          position: absolute;
          left: 50%;
          background: $color-warning;
          top: 30upx;
          z-index: -1;
        }
      }
	  
	  &:not(:first-child) {
	    .progress-index::after {
	      width: 50%;
	      height: 6upx;
	      content: "";
	      position: absolute;
	      left: -30upx;
	      background: $color-warning;
	      top: 30upx;
	      z-index: -1;
	    }
	  }
    }
  }
}
</style>
